<template>
	<view class="page">
		<view class="select_date">
			<view class="page_title f_32 f_5 navy_blue">选择本次上课时间</view>
			<view class="month_title">
				<image @tap="setMonth(-1)" class="icon_pre tf-180" :src="imgPrefix('/static/image/icon/next.png')"></image>
				<text class="f_5">{{ timeStrArr[0] }}</text>
				<image @tap="setMonth(+1)" class="icon_next" :src="imgPrefix('/static/image/icon/next.png')"></image>
			</view>
			<view class="week_list">
				<view v-for="(item, index) in weekList" :key="index" class="week_item">周{{ item }}</view>
			</view>
			<view class="day_list p-r">
				<!-- 前面的空白格 -->
				<view v-for="(item, indey) in arrList[1] - 1" :key="indey" class="day_item"></view>
				<!-- 日期列表 -->
				<view v-for="(item, indez) in arrList[0]" :key="indez" @tap.stop="bindDate(indez)" :class="['day_item', bindIndex == indez ? 'active' : '']">
					<text :class="[bindIndex != indez ? 'navy_blue' : '', starTime == thisTime && arrList[2] - 1 > indez ? 'inv' : '']">{{ item + 1 }}</text>
					<text v-if="checkHasSelectArr[indez]" class="border_icon"></text>
				</view>
				<!-- 后面的空白格（采用样式解决的话最后一行对齐不准） -->
				<view v-for="(item, indeq) in 7 - ((arrList[1] - 1 + arrList[0]) % 7)" :key="indeq" class="day_item"></view>
			</view>
			<text class="bgs"></text>
		</view>
		<view class="select_time" v-show="bindIndex != -1">
			<view class="time_top">
				<text class="this_time f_5">{{ timeStrArr[0] + (bindIndex + 1) + '日' }}</text>
				<view class="accuracy_title" @tap.stop="bindAccuracy">
					<text v-if="!hasAccuracy" class="accuracy"></text>
					<image v-else :class="['accuracy', canAccuracy ? '' : 'bg_gery']" :src="imgPrefix('/static/image/icon/select_icon.png')"></image>
					<text class="accuracy_text f_5">精确到30分</text>
				</view>
			</view>
			<view class="time_list p-r">
				<!-- 0没有选择且可选 1已选  2忙碌 3已经过了当前时间 -->
				<view
					v-for="(itemq, indeq) in timeList"
					:key="indeq"
					:class="['time_item', itemq.state == 1 ? 'active' : '', itemq.state == 2 || itemq.state == 3 ? 'bg_gery' : '']"
					@tap.stop="bindTime($event,indeq, itemq.time)"
				>
					<text>{{ itemq.time }}</text>
					<!-- <text v-if="itemq.busy && !itemq.select">忙</text> -->
					<!-- 繁忙状态且可选再显示 -->
				</view>
				<!-- <text>注：课程次数：{{ courseNum }},单次课程时长：{{ timeLen }}小时</text> -->
			</view>
			<text class="bgs"></text>
		</view>
		<fixed-bottom>
			<!-- 单次课程选时间 -->
			<view v-if="isView" :class="['one_bind_btn','violet1',selectNum>0?'active':'']" @tap="selectedList.length==0?showToast('请选择预约时间'):returnBtn()">确定时间</view>
			<!-- 购买时选择全部时间 -->
			<view v-else class="select_bottom">
				<view class="study_view" @tap.stop="closeSelectTimePopup">
					<image class="study" :src="imgPrefix('/static/image/icon/study.png')"></image>
					<text class="num">{{ selectNum }}</text>
				</view>
				<view class="course_info">
					<text class="course_num">共{{ courseNum }}次课程</text>
					<text class="select_text">
						已选
						<text class="select_num">{{ selectNum }}次</text>
						课程
					</text>
				</view>
				<view class="bind_btn" @tap.stop="courseNum == selectNum ? pageTo('/pages/selected_time/index') : showToast(`还剩余${courseNum - selectNum}课次未选择上课时间`)">
					生成课表
				</view>
			</view>
		</fixed-bottom>
		
		<view class="cart-item-elc" :style="{left:cartItemElc.left+'px',top:cartItemElc.top+'px'}" v-show="isCartIcon"></view>
		<zan-popup v-if="!isView" :show="showSelectTime" type="bottom" @close="closeSelectTimePopup">
			<view class="popup-box">
				<view class="title dis-flex flex-y-center flex-x-between">
					<view class="" @tap.stop="closeSelectTimePopup"><image :src="imgPrefix('/static/image/icon/address_close.png')"></image></view>
					<view class="f_32 navy_blue">已选时间</view>
					<view class="f_24 clear" @tap.stop="bindClear">清空全部</view>
				</view>
				<view class="select-time-box">
					<block v-for="(dItem, key) in selectedList" :key="key">
						<view v-for="(tItem, tIndex) in dItem.times" :key="tIndex" class="select-time dis-flex flex-x-between">
							<view class="dis-flex">
								<!-- <view class="f_26 f_normal f-c-1f2633 index">第i课</view> -->
								<view class="f_26 f_normal f-c-1f2633 index">第{{ checkSelectTimeIndex(dItem.date, tIndex) }}课</view>
								<view class="f_26 f-c-1f2633">{{ returnDayAWeek(dItem.date) }} {{ tItem }}</view>
							</view>
							<view class="" @tap.stop="bindDelte(dItem.date, tIndex)"><image :src="imgPrefix('/static/image/icon/teacher_card_close.png')"></image></view>
						</view>
					</block>
				</view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
import { commonMixinFun } from '@/static/mixins/common.js';
import zanPopup from '@/components/popup/index.vue';
import { formatNumber, setNewdate, format, deepClone } from '@/static/uitls/common.js';
import API from '@/static/api/index.js';
import {bezier} from "@/static/uitls/bezier";
const app = getApp();
let ins = '';
export default {
	mixins: [commonMixinFun],
	components: {
		zanPopup
	},
	data() {
		return {
			teacher_id: '', //教师ID
			teacher_course_id: '', //教师课程ID
			bindDayList: {
				//  格式'2020-07-27':{busyTime:[],selectTime:[]},
			}, // 存用户点击过的日期记录
			showSelectTime: false, //是否弹出选择时间
			// starTime: '', // 开始时间（精确到月份） 计算属性
			thisTime: '', //当前时间（精确到月份）
			weekList: ['一', '二', '三', '四', '五', '六', '日'],
			bindIndex: -1, //日期点击的下标
			endMonth: 12 * 2, //结束年份(动态)
			arrList: [], //[当前月份的天数，当前月份1号前面的空白数量，当天号数（非当前月份该值可能为-1）]
			hasAccuracy: false, // 是否精确到30分
			// timeList: [], //时间列表 计算属性
			courseNum: 0, //课程次数
			// selectNum:0,//已选的课程次数 计算属性
			timeLen: 1, //单次课程时长
			timeStrArr: [], //根据thisTime动态变化的页面字符
			timeLow: [], //不可选择的时间数组
			// canAccuracy: true, //是否可以更改当前精确 计算属性
			// checkHasSelectArr: [], //检查当月时间对应日期是否有选择过时间
			teacherBusyTime: [], //教师繁忙数组
			unSetData: false ,//是否不要设置数据，页面跳转时涉及到值变化，触发会有问题
			isView:false,//判断进入来源 true为单次课程勾选
			
			
			
			isCartIcon:false,
			cartItemElc:{
			    left:0,
			    top:0
			},
		};
	},
	onLoad(option) {
		this.goodsWrapTop=0;
		this.goodsWrapLeft=0;
		this.timer=null;
		this.isAnimate=true;
		// bindDayList={}&courseNum=12&teacher_id=5&teacher_course_id=5&hour=1&isView=true	
		app._log(option);
		this.timeLen = Number(decodeURIComponent(option.hour)); // 单次课程时长
		this.teacher_id = decodeURIComponent(option.teacher_id);
		this.teacher_course_id = decodeURIComponent(option.teacher_course_id);
		this.bindDayList = option.hasOwnProperty('bindDayList') ? JSON.parse(decodeURIComponent(option.bindDayList)) : {};
		this.isView = option.hasOwnProperty('isView');
		this.courseNum = JSON.parse(decodeURIComponent(option.courseNum));
		app._log(decodeURIComponent(option.bindDayList))
		this.thisTime = this.getyearAndMonth(new Date()); //设置为当前月份
		this.arrList = this.getCurrentMonthDayNum();
		this.bindAccuracy(false);
	},
	watch: {
		bindIndex(val, oldVal) {
			// 监听日期变化
			app._log(this.bindIndex,'走哪了5')
			app._log('日期变化了', val);
			if (val >= 0 && !this.unSetData) {
				this.getTeacherBusyTime();
				// if(this.timeList.length==0){
				// 	this.timeList = this.setTimeList()
				// }
			}
		},
		thisTime(val, oldVal) {
			app._log('月份变了几次')
			// 监听月份变化
			this.timeStrArr = [val.replace(/-/, '年') + '月'];
			if (!this.unSetData) {
				this.bindIndex = -1;
				app._log('是你设置的吗');
			}
		}
	},
	computed: {
		//处理列表显示的下标
		checkSelectTimeIndex: function() {
			return function aaa(dayStr, index) {
				let { selectedList } = this;
				let num = 0;
				let judge = true;
				if (judge) {
					for (let i in selectedList) {
						for (let tIndex = 0; tIndex < selectedList[i].times.length; tIndex++) {
							if (judge) {
								num++;
							}
							if (judge && selectedList[i].date == dayStr && tIndex == index) {
								judge = false;
							}
						}
					}
					return num;
				}
			};
		},
		//实时更新起始月份
		starTime: function() {
			return this.getyearAndMonth(new Date()); //当前月份
		},
		//计算已选的课程次数
		selectNum: function() {
			let num = 0;
			let { bindDayList } = this;
			if (bindDayList != undefined) {
				if (JSON.stringify(bindDayList) != '{}') {
					for (let i in bindDayList) {
						num += bindDayList[i].selectTimeList.length;
					}
				}
			}
			return num;
		},
		canAccuracy: function() {
			// 是否可以切换精确值
			let { bindDayList} = this;
			if (JSON.stringify(bindDayList) != '{}') {
				for (let i in bindDayList) {
					let arr = bindDayList[i].selectTimeList;
					app._log(arr, bindDayList[i].selectTimeList.filter(o => Number(o.charAt(3)) != Number(0)));
					if (bindDayList[i].selectTimeList.filter(o => Number(o.charAt(3)) != Number(0)).length > 0) {
						return false;
					}
				}
			}
			return true;
		},
		timeList: function() {
			// 具体某天的时间列表（页面暂时的状态）
			return this.setTimeList();
		},
		selectedList: function() {
			// 已经选择了的时间列表
			let { bindDayList,isView } = this;
			let dkeysSorted = Object.keys(bindDayList).sort((a, b) => {
				return new Date(a) - new Date(b);
			});
			let newD = [];
			dkeysSorted.forEach((e, i) => {
				let obj = { date: e, times: [] };
				let { selectTimeList } = bindDayList[e];
				let tkeysSorted = Object.keys(selectTimeList).sort((a, b) => {
					return new Date(e + ' ' + selectTimeList[a].split(':')[0] + ':00') - new Date(e + ' ' + selectTimeList[b].split(':')[0] + ':00');
				});
				// app._log(tkeysSorted)
				tkeysSorted.forEach((te, ti) => {
					obj.times.push(selectTimeList[te]);
				});
				newD.push(obj);
			});
			return newD;
		},
		checkHasSelectArr:function(){
			let {bindDayList,thisTime,arrList}=this;
			let arr = []
			for(let key in bindDayList){
				let keys = key.split('/');
				if(bindDayList[key].selectTimeList.length>0&&(keys[0]+'-'+keys[1])==thisTime){
					arr.push(keys[2]-1)
					app._log(key)
				}
			}
			let tempArr = []
			for(let i=0;i<arrList[0];i++){
				tempArr.push(arr.indexOf(i)!=-1)
			}
			// if(arr.length==1){
			// 	this.bindDate(arr[0])
			// }
			return tempArr;
		}
	},
	onShow() {
		uni.$on('watchArr', res => {
			//监听选择列表变化
			if(res.clear){
				this.clearList()
			}
			// 清除监听
			uni.$off('watchArr');
		});
		uni.$on('watchDay', res => {
			app._log('有没有进监听',res);
			app._log('走哪了2')
			//监听时间变化
			let d = res.day.split('/');
			this.setMonth('',d[0] + '/' + d[1])
			// this.thisTime = d[0] + '-' + d[1];
			app._log(Number(d[2]) - 1);
			this.bindDate(Number(d[2]) - 1)
			
			app._log(this.bindIndex,'走哪了4')
			// if(!this.isView){
				this.unSetData = true;
				setTimeout(() => {
					this.unSetData = false;
				}, 200);
			// }
			// 清除监听
			uni.$off('watchDay');
		});
	},
	methods: {
		setTimeList() {
			let { bindDayList, hasAccuracy, bindIndex } = this;
			let tempArr = [];
			if (bindIndex != -1 && bindDayList.hasOwnProperty(this._getDay())) {
				let thisDay = bindDayList[this._getDay()]; // 找到当天存储对象
				let loopLen = 24 * (hasAccuracy ? 2 : 1);
				let nowTimeStamp = new Date().valueOf(); //当前时间戳
				app._log(thisDay);
				for (let i = 6 * (hasAccuracy ? 2 : 1); i <= loopLen; i++) {
					let thisTimeStr = formatNumber(hasAccuracy ? Math.floor(i / 2) : i) + ':' + (hasAccuracy ? (i % 2 == 0 ? 0 : 3) : '0') + '0'; //该日期具体时间点
					let state = 0;
					let thisTimeStamp = new Date(this._getDay() + ' ' + thisTimeStr).valueOf(); //循环的当前时间时间戳
					//判断步骤  1->该时间是否过了当前时间（3） 2->该时间 是否已选择（1） 3->该时间是否忙碌（2）
					if (nowTimeStamp >= thisTimeStamp) {
						// 该时间过了当前时间
						// 该时间后面不可选 该时间过了当前时间
						state = 3;
						// app._log(thisTimeStr + '该时间过了当前时间');
					} else {
						if (this.checkSelectTimeValid(thisTimeStr != '24:00' ? thisTimeStr : '00:00', thisDay.selectTimeList)) {
							// 当前时间是选中了的
							state = 1;
						} else if (this.checkSelectTimeValid(thisTimeStr != '24:00' ? thisTimeStr : '00:00', thisDay.busyTimeList)) {
							// 当前时间是忙碌的
							state = 2;
						}
					}
					tempArr.push({ time: thisTimeStr, state: state });
				}
			}
			return tempArr;
		},
		_getDay(type = '') {
			//默认返回当前时间字符串,传's'返回时间戳
			let str = this.thisTime.replace(/-/g, '/') + '/' + formatNumber(Number(this.bindIndex + 1));
			if (type == 's') {
				str = new Date(str).valueOf();
			}
			return str;
		},
		// 获取当前时间教师繁忙列表
		getTeacherBusyTime(callBack) {
			let { thisTime, bindIndex, bindDayList } = this;
			if (bindDayList.hasOwnProperty(this._getDay())) {
				app._log('已经添加过当天了');
				callBack && callBack(bindDayList[this._getDay()].busyTimesList);
			} else {
				API.getTeacherBusyTime(this.teacher_course_id, this._getDay()).then(res => {
						app._log(res);
						if (res.code == 1) {
							let busyTimeArr = res.data.times;
							// app._log('当天忙碌时间',busyTimeArr)
							this.bindDayList = Object.assign(deepClone(bindDayList), { [this._getDay()]: { busyTimeList: busyTimeArr, selectTimeList: [] } });
							// app._log(this.bindDayList)
							callBack && callBack(busyTimeArr);
						} else {
							this.getTimeError(callBack);
						}
					})
					.catch(err => {
						this.getTimeError(callBack);
					});
			}
		},
		getTimeError(callback) {
			uni.showModal({
				title: '加载失败',
				content: '是否重新加载或返回上一页？',
				cancelText: '返回',
				confirmText: '重试',
				success: res => {
					if (res.confirm) {
						this.getTeacherBusyTime(callback);
					} else if (res.cancel) {
						uni.navigateBack({ delta: 1 });
					}
				}
			});
		},
		returnDayAWeek(monthStr) {
			return format(new Date(monthStr), 'yyyy年MM月dd日') + ' 周' + '日一二三四五六'.charAt(new Date(monthStr).getDay());
		},
		//删除
		bindDelte(dayStr, tIndex) {
			app._log(dayStr, tIndex);
			uni.showModal({
				title: '删除提醒',
				content: '删除后不可恢复，是否把已选课程时间删除？',
				cancelColor: '#666666',
				confirmColor: '#333333',
				success: res => {
					if (res.confirm) {
						let { bindDayList } = this;
						// let newArr = deepClone(bindDayList)
						app._log(bindDayList, bindDayList[dayStr].selectTimeList);
						bindDayList[dayStr].selectTimeList.splice(tIndex, 1);
						this.bindDayList = bindDayList;
						this.showToast('删除成功');
					}
				}
			});
		},
		//清空全部
		bindClear() {
			uni.showModal({
				title: '清除提醒',
				content: '清除全部搜索记录后不可恢复，是否清除？',
				cancelColor: '#666666',
				confirmColor: '#333333',
				success: res => {
					if (res.confirm) {
						app._log('用户点击确定');
						this.clearList()
						this.closeSelectTimePopup();
					}
				}
			});
		},
		// 单次预约时间
		returnBtn(){
			uni.$emit("watchArr",{bindDayList: this.bindDayList});
			uni.navigateBack({delta:1})
		},
		//清空列表
		clearList(state=true){
			let { bindDayList } = this;
			for (let i in bindDayList) {
				bindDayList[i].selectTimeList = [];
			}
			state&&this.showToast('已清除');
		},
		// 关闭弹窗事件
		closeSelectTimePopup(delay = 0) {
			setTimeout(() => {
				this.showSelectTime = !this.showSelectTime;
			}, delay);
		},
		// 计算[某个月有多少天,该月的第一天，该月中是否包含今天（含返回当天，不含返回-1）]
		getCurrentMonthDayNum(time = this.thisTime) {
			let today = new Date(time);
			let index = -1;
			if (today.getFullYear() == new Date().getFullYear() && today.getMonth() == new Date().getMonth()) {
				// 如果当前月份包含今天，返回今天*号
				index = new Date().getDate();
			}
			let dayAllThisMonth = 31;
			let currentMonthStartDate = new Date(today.getFullYear() + '/' + (today.getMonth() + 1) + '/01'); // 本月1号的日期
			let nextMonthStartDate = ''; // 下个月1号的日期
			if (today.getMonth() + 1 != 12) {
				//不是12月
				nextMonthStartDate = new Date(today.getFullYear() + '/' + (today.getMonth() + 2) + '/01');
			} else {
				//12月的时候年份+1
				nextMonthStartDate = new Date(today.getFullYear() + 1 + '/' + '01/01');
			}
			dayAllThisMonth = (nextMonthStartDate - currentMonthStartDate) / (24 * 3600 * 1000);
			//设置占位
			return [dayAllThisMonth, today.getDay(), index];
		},
		// 点击上下月
		setMonth(num,month='') {
			app._log(month)
			if(month!=''){//直接跳转到对应月份
				this.thisTime = this.getyearAndMonth(new Date(month.replace(/-/g,'/'))); //当前月份
			}else{
				let nowDate = new Date();
				let { starTime, thisTime, endMonth } = this;
				let starTimeStr = this.getyearAndMonth(nowDate); //当前月份
				let thisDate = new Date(thisTime.replace(/-/g, '/')+'/1');
				if (num == -1) {
					//上个月
					if (starTimeStr == thisTime) {
						// 起始月份
						app._log('起始月份');
					} else {
						this.thisTime = this.getyearAndMonth(setNewdate('m', num,thisDate)); //当前月份
					}
				} else {
					//下个月
					let nextMonth = setNewdate('m', num, thisDate);
					let endMonthObj = setNewdate('m', endMonth, new Date(starTimeStr));
					if (nextMonth > endMonthObj) {
						// 末月份
						app._log('末月份');
					} else {
						this.thisTime = this.getyearAndMonth(nextMonth); //当前月份
					}
				}
			}
			this.arrList = this.getCurrentMonthDayNum();
		},
		getyearAndMonth(date) {
			return date.getFullYear() + '-' + formatNumber(date.getMonth() + 1); //当前月份
		},
		// 点击具体日期
		bindDate(index) {
			app._log('点击了日期',index)
			app._log('走哪了3')
			let { starTime, thisTime, arrList } = this;
			if (starTime == thisTime) {
			app._log('是同月')
				// 当前月
				if (index + 1 < arrList[2]) {
					app._log('有劲？')
				} else {
					app._log('设置了吧，大哥')
					this.bindIndex = index;
				}
			} else {
				this.bindIndex = index;
			app._log('不同月')
			}
		},
		// 点击精确到30分
		bindAccuracy(state = true) {
			if (this.canAccuracy) {
				if (state) {
					this.hasAccuracy = !this.hasAccuracy;
				}
			}
		},

		// 处理时间格式,将"00:00/24:00"处理为"23:59"
		foramTimeStr(str) {
			if (str == '00:00' || str == '24:00') {
				return '23:59';
			}
			return str;
		},
		/**
		 * by BEN
		 * 判断当前时段是否与不可选时段数组存在冲突
		 * true：当前时段有效，不存在冲突
		 * false：当前时段无效，存在冲突
		 */
		checkTimeValid(thisTime, invalidTimes) {
			app._log(thisTime, invalidTimes);
			if (invalidTimes.length > 0) {
				if (thisTime.indexOf('-') != -1) {
					// 判断【时间段】是否在该时间内
					let thisTimes = thisTime.split('-');
					let thisTimeBegin = this.foramTimeStr(thisTimes[0]);
					let thisTimeEnd = this.foramTimeStr(thisTimes[1]);
					for (let i = 0; i < invalidTimes.length; i++) {
						let times = invalidTimes[i].split('-');
						let timeBegin = this.foramTimeStr(times[0]);
						let timeEnd = this.foramTimeStr(times[1]);
						if (timeBegin < thisTimeEnd && thisTimeBegin < timeEnd) {
							return false;
						}
					}
				} else {
					// 判断【时间】是否在该时间内
					for (let i = 0; i < invalidTimes.length; i++) {
						let times = invalidTimes[i].split('-');
						let timeBegin = this.foramTimeStr(times[0]);
						let timeEnd = this.foramTimeStr(times[1]);
						if (timeBegin < thisTime && thisTime < timeEnd) {
							return false;
						}
					}
				}
			}
			return true;
		},
		//查验时间节点是否在时间段数组中
		checkSelectTimeValid(thisTime, invalidTimes) {
			// app._log(thisTime,invalidTimes)
			thisTime = this.foramTimeStr(thisTime);
			if (invalidTimes.length > 0) {
				// 判断【时间】是否在该时间内
				for (let i = 0; i < invalidTimes.length; i++) {
					let times = invalidTimes[i].split('-');
					let timeBegin = this.foramTimeStr(times[0]);
					let timeEnd = this.foramTimeStr(times[1]);
					if (timeBegin <= thisTime && thisTime <= timeEnd) {
						return true;
					}
				}
			}
			return false;
		},
		//0没有选择且可选 1已选  2忙碌 3已经过了当前时间
		// 点击具体时间
		bindTime(e,index, item) {
			let { isView,starTime, thisTime, timeList, bindIndex, timeLen, courseNum, selectNum, hasAccuracy, bindDayList } = this;
			let thisTimeStr = this._getDay() + ' ' + item; //当前字符时间
			app._log('当前时间', format(new Date(), 'yyyy-MM-dd hh:ss'), '点击时间', format(new Date(thisTimeStr), 'yyyy-MM-dd hh:ss'), new Date() - new Date(thisTimeStr));
			if (new Date() - new Date(thisTimeStr) < 0) {
				//点击事件大于当前时间才可以点当前时间
				//TODO 下面两个是用来判断日期的，用来解决刚好24点也不在同一天的处理，-1分钟就不存在这个问题
				let endTimeObj = setNewdate('M', (timeLen - 1) * 60 + 59, new Date(thisTimeStr)); //结束时间
				let thisTimes = item + '-' + format(endTimeObj, 'hh:mm'); // 该段日期字符
				//TODO 下面两个是用来显示真正日期的
				let endTimeObj1 = setNewdate('h', timeLen, new Date(thisTimeStr)); //结束时间
				let thisTimes1 = item + '-' + format(endTimeObj1, 'hh:mm'); // 该段日期字符
				let cheakArr = deepClone(bindDayList[this._getDay()]);
				// app._log('该段时间',thisTimes,'该天数据',bindDayList[this._getDay()])
				// app._log(new Date(this._getDay()).getDay(),endTimeObj.getDay(),endTimeObj.getMinutes())
				const needCheckArr = cheakArr.busyTimeList.concat(isView?[]:cheakArr.selectTimeList);//多次的要合并，单次的不用
				app._log('忙碌数组->', cheakArr.busyTimeList, '已选择数组->', cheakArr.selectTimeList, '需要查验的合并数组->', needCheckArr);
				app._log('开始时间->', format(new Date(thisTimeStr), 'yyyy-MM-dd hh:mm'), '结束时间->', format(endTimeObj, 'yyyy-MM-dd hh:mm'));
				app._log('开始时间日期->', new Date(thisTimeStr).getDay(), '结束时间日期->', endTimeObj.getDay());
				if (new Date(this._getDay()).getDay() != endTimeObj.getDay()) {
					//起始时间不在同一天
					this.showToast('时间不满单次课程');
				} else if (this.checkTimeValid(thisTimes, needCheckArr)) {//过滤满足条件
					console.log(1)
					//检查忙碌时间列表和已选时间列表有没有当前需要追加的时间段
					// app._log('进来了')
					if (selectNum == courseNum&&!isView) {
						this.showToast('您已经添加了' + selectNum + '次课时间');
					} else if (needCheckArr.indexOf(thisTimes) == -1) { // 没有就追加
						if(isView){ // 单次的就删除之前选中
							this.clearList(false)
						}
						this.bindDayList[this._getDay()].selectTimeList.push(thisTimes1);
						if(!this.isView){
							this.incAmount(e)
						}
					} else if (selectNum < courseNum) {
						this.showToast('此时段已有课次安排');
					}
				} else {
					console.log(2)
					// this.showToast('时间不满单次课程或不可选')
				}
			}
		},
		
		//点击课程时间
		incAmount(e){
			this.cartItemElc.left=e.touches[0].pageX;
			this.cartItemElc.top=e.touches[0].pageY;
		    let cartIcon=uni.createSelectorQuery().select(".study");
		    cartIcon.boundingClientRect(data=>{
		        this.bezierPos=bezier([{x:this.cartItemElc.left,y:this.cartItemElc.top},{x:this.cartItemElc.left-20<=data.left?-480:Math.abs(this.cartItemElc.left-20),y:120},{x:data.left,y:data.top+200}],30);
		        this.startAnimation();
		    }).exec();
		
		},
		//开始动画
		startAnimation(){
		    if(this.isAnimate){
		        this.isAnimate=false;
		        let bezier_points = this.bezierPos['bezier_points'];
		        let index=0;
		        this.isCartIcon=true;
		        clearInterval(this.timer);
		        this.timer=setInterval(()=>{
		            index++;
		            this.cartItemElc.left=bezier_points[index]["x"];
		            this.cartItemElc.top=bezier_points[index]["y"];
		            //动画完成
		            if(index >= 29){
		                clearInterval(this.timer);
		                this.isAnimate=true;
		                this.isCartIcon=false;
		            }
		        },30);
		    }
		},
	},
	destroyed() {
		// clearInterval(ins);
	}
};
</script>

<style lang="scss">
.cart-item-elc{width:20rpx;height:20rpx;background-color:#ff6f03;position:absolute;left:0px;top:0px;border-radius: 100%;z-index:99;}
Page,
.page {
	background-image: linear-gradient(0deg, #7f4aff 0%, #c29fff 100%);
}
.page {
	padding-bottom: 48rpx;
}

.bg_gery:not(.active) {
	//不可选
	color: #fff !important;
	background-color: #e2e2e5 !important;
	border-color: #e2e2e5 !important;
}
.select_ {
	&date,
	&time {
		width: 654rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		padding-top: 24rpx;
		margin: 16rpx 48rpx 24rpx;
		position: relative;
		.bgs{
			display: block;
			position: absolute;
			width: 630rpx;
			height: 40rpx;
			background-color: #ffffff;
			border-radius: 32rpx;
			opacity: 0.2;
			bottom: -8rpx;
			left: 12rpx;
		}
	}
	// 日期star
	&date {
		margin-top: 32rpx;
		.page_title {
			line-height: 44rpx;
			text-align: center;
			margin-bottom: 24rpx;
		}
		.month_title {
			padding: 32rpx;
			height: 92rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid rgba(204, 204, 204, 0.5);
			.icon_pre,
			.icon_next {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.week_list {
			font-size: 24rpx;
			height: 50rpx;
			line-height: 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			color: #8f8f9a;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid rgba(204, 204, 204, 0.5);
		}
		.day_list {
			padding: 12rpx 0;
			display: flex;
			flex-wrap: wrap;
			z-index: 10;
			.day_item {
				margin-bottom: 4rpx;
				justify-items: center;
				align-items: center;
				width: calc(654rpx / 7);
				height: 72rpx;
				position: relative;
				&.active {
					text {
						color: #fff;
						background-image: linear-gradient(320deg, #9254ff 0%, #7f4aff 100%);
						border-radius: 32rpx 32rpx 8rpx 32rpx;
					}
				}
				.border_icon {
					display: block;
					position: absolute;
					overflow: hidden;
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background-color: rgb(127, 74, 255);
					text-align: center;
					left: calc((654rpx / 7) / 2 - 4rpx);
					bottom: 6rpx;
					margin: 0;
				}
				text {
					display: flex;
					width: 72rpx;
					line-height: 72rpx;
					justify-content: center;
					margin-left: 10rpx;
					&.inv {
						color: rgba(143, 143, 154, 0.5);
					}
				}
			}
		}
	}
	// 日期end
	// 时间star
	&time {
		padding-left: 24rpx;
		padding-right: 24rpx;
		margin-bottom: calc(182rpx + constant(safe-area-inset-bottom));
		margin-bottom: calc(182rpx + env(safe-area-inset-bottom));
		.time_top {
			display: flex;
			justify-content: space-between;
			height: 40rpx;
			align-items: center;
			.this_time {
				font-size: 28rpx;
				color: #252748;
			}
			.accuracy_title {
				display: flex;
				align-items: center;
				image.accuracy {
					padding: 6rpx 5rpx;
					&:not(.bg_gery) {
						background-image: linear-gradient(318deg, #9254ff 0%, #7f4aff 100%);
					}
				}
				.accuracy {
					display: inline-block;
					margin-right: 8rpx;
					width: 29rpx;
					height: 29rpx;
					border-radius: 4rpx;
					border: 2rpx solid #999999;
					&.bg_gery {
						border-color: #d1d2db;
					}
				}
				.accuracy_text {
					font-size: 28rpx;
					color: #1f2633;
				}
			}
		}
		.time_list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 32rpx;
			z-index: 10;
			.time_item {
				width: 88rpx;
				height: 88rpx;
				font-size: 26rpx;
				border-radius: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 16rpx;
				color: #8f8f9a;
				border: solid 2rpx #d1d2db;
				transition: 0.2s;
				&.busy:not(.bg_gery) {
					//繁忙且是可选的
					color: #ff6f03;
					border-color: #ff6f03;
					background-color: rgba(255, 111, 3, 0.12);
				}
				&.active {
					// 选了
					color: #fff;
					background-image: linear-gradient(318deg, #9254ff 0%, #7f4aff 100%);
				}
				&:not(:nth-child(6n)) {
					margin-right: 15.9rpx;
				}
			}
		}
	}
	// 时间end
	// 底部栏 star
	&bottom {
		width: 654rpx;
		height: 108rpx;
		background-color: #f0f0f6;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		padding: 0 8rpx 0 16rpx;
		margin-left: 48rpx;
		.study_view {
			position: relative;
			margin-bottom: 40rpx;
			.study {
				width: 114.66rpx;
				height: 134.74rpx;
				margin-right: 20rpx;
			}
			.num {
				position: absolute;
				display: block;
				top: -30rpx;
				right: 0rpx;
				width: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: 24rpx;
				background-color: #ff6f03;
				border-radius: 50%;
				color: #fff;
			}
		}
		.course_info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			padding-left: 8rpx;
			.course_num {
				font-size: 22rpx;
				line-height: 32rpx;
				color: #8f8f9a;
			}
			.select_text {
				font-size: 28rpx;
				color: #252748;
				.select_num {
					color: #ff6f03;
				}
			}
		}
		.bind_btn {
			width: 240rpx;
			line-height: 92rpx;
			text-align: center;
			color: #fff;
			background-image: linear-gradient(270deg, #7f4aff 0%, #ab7bff 100%);
			border-radius: 16rpx;
		}
	}
}
.one_bind_btn {
	margin-left: 48rpx;
	z-index: 100;
	width: 654rpx;
	line-height: 92rpx;
	text-align: center;
	border-radius: 24rpx;
	font-size: 32rpx;
	background-color: rgba(255, 255, 255, 0.5);
	&.active {
		background-color: rgba(255, 255, 255, 1);
	}
}
.popup-box {
	width: 750rpx;
	background-color: white;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	.title {
		height: 92rpx;
		padding: 0 48rpx;
		.clear {
			color: rgba(143, 143, 154, 0.6);
		}
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.f-c-1f2633 {
		color: #1f2633;
	}
	.select-time-box {
		height: 664rpx;
		overflow-y: scroll;
		.select-time {
			border-bottom: 1px solid #f2f2f2;
			line-height: 100rpx;
			margin: 0 48rpx;
			.index {
				margin-right: 36rpx;
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}
</style>
